.homeUserContent(
	layout="column"
	flex
	layout-align="center center")

	md-content.md-whiteframe-1dp(
		flex-xs="90"
		flex-sm="85"
		flex-md="80"
		flex-lg="70"
		flex-xl="50"
		aria-label="Register")
		md-toolbar
			.md-toolbar-tools
				h2 Sign Up

		.userContent(layout="column", layout-align="start center")
			div.sign-up-padding
				div(layout="column" layout-align="center center")
					p.free Creating a 3D Repo account is free
				form(name="signup")
					div(layout="row", layout-xs="column")
						md-input-container(flex)
							label Username
							input(name="username", type='text', ng-model='vm.newUser.username', required, ng-keypress="vm.register($event)", tdr-focus="true",
							maxlength=15)

					div(layout="row", layout-xs="column")
						md-input-container(flex)
							label Password {{vm.getPasswordLabel()}}
							input(name="password" type='password', ng-model='vm.newUser.password', required, ng-keypress="vm.register($event)")
						md-input-container(flex)
							label Confirm Password {{vm.registerPasswordMessage}}
							input(name="confirmPassword" type='password', ng-model='vm.newUser.confirmPassword', required,
							 ng-blur="vm.checkDuplicateValues(true)", ng-keypress="vm.register($event)")

					div(layout="row", layout-xs="column")
						md-input-container(flex)
							label First name
							input(type="text", ng-model="vm.newUser.firstName", required)
						md-input-container(flex)
							label Last name
							input(type="text", ng-model="vm.newUser.lastName", required)

					div(layout="row", layout-xs="column")
						md-input-container(flex)
							label Email
							input(type='email', ng-model='vm.newUser.email', required, ng-keypress="vm.register($event)")
						md-input-container(flex)
							label Confirm Email {{vm.registerConfirmEmailMessage}}
							input(name="confirmEmail" type='email', ng-model='vm.newUser.confirmEmail', required,
							ng-blur="vm.checkDuplicateValues(false)", ng-keypress="vm.register($event)")

					div(layout="row", layout-xs="column")
						md-input-container(flex)
							label Company
							input(type="text", name="company",ng-model="vm.newUser.company", maxlength=25)
						md-input-container(flex)
							label Country
							md-select#country-select(ng-model="vm.newUser.country", required)
								md-option(ng-repeat="country in vm.countries", value="{{country.code}}") {{country.name}}

					div(layout="row", layout-xs="column")
						md-input-container(flex)
							#loginCaptcha(
								vc-recaptcha
								key="vm.captchaKey"
								ng-model="vm.reCaptchaResponse"
								ng-if="vm.useReCAPTCHA")
					div(layout="row", layout-xs="column")
						md-input-container(flex)
							#sub(layout="row", layout-align="start start", flex)
								md-checkbox.md-accent(ng-model="vm.newUser.mailListAgreed" aria-label="Mailing list Checkbox")
								div(layout="row", layout-align="start center")
									p Sign up for the latest news and tutorials!
					div(layout="row", layout-xs="column")
						md-input-container(flex)
							#tc(layout="row", layout-align="start start", flex, ng-if="vm.showLegalText")
								md-checkbox.md-accent(ng-model="vm.newUser.tcAgreed" aria-label="Terms and conditions Checkbox")
								div(layout="row", layout-align="start center")
									p(ng-bind-html="vm.legalText")

					div(layout="row", layout-xs="column", flex="100" layout-align="center center")
						h3.registerError() {{vm.registerErrorMessage}}

					div(layout="row", layout-xs="column", layout-align="start center")
						md-button.md-accent.md-raised.sign-up-button(
							ng-click="vm.register()"
							ng-disabled="vm.registering"
							aria-label="Register Button"
							flex="none")

							span(ng-if="!vm.registering") {{vm.buttonLabel}}
							md-progress-circular(ng-if="vm.registering" md-mode="indeterminate", md-diameter="20")

					div.bottom-links

						a.registerLinks(target="_blank", rel="noopener", href="http://3drepo.org/pricing/")
							md-button.pricing Pricing

						a.registerLinks(ui-sref="app.login")
							md-button.logIn Log in
